<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="language" content="en" />

        <title>Layout with Accordion</title>
        <!-- http://layout.jquery-dev.net/ -->

        <link rel="stylesheet" type="text/css" href="layout-default-latest.css" />
        <link rel="stylesheet" type="text/css" href="../jquery/development-bundle/themes/base/jquery.ui.all.css" />
        <!-- CUSTOMIZE/OVERRIDE THE DEFAULT CSS -->
        <style type="text/css">

        /* remove padding and scrolling from elements that contain an Accordion OR a content-div */
        .ui-layout-center ,	/* has content-div */
        .ui-layout-west ,	/* has Accordion */
        .ui-layout-east ,	/* has content-div ... */
        .ui-layout-east .ui-layout-content { /* content-div has Accordion */
                padding: 0;
                overflow: hidden;
        }
        .ui-layout-center P.ui-layout-content {
                line-height:	1.4em;
                margin:			0; /* remove top/bottom margins from <P> used as content-div */
        }
        h3, h4 { /* Headers & Footer in Center & East panes */
                font-size:		1.1em;
                background:		#EEF;
                border:			1px solid #BBB;
                border-width:	0 0 1px;
                padding:		7px 10px;
                margin:			0;
        }
        .ui-layout-east h4 { /* Footer in East-pane */
                font-size:		0.9em;
                font-weight:	normal;
                border-width:	1px 0 0;
        }

        .ui-layout-resizer { /* all 'resizer-bars' */ 
                background: #DDD; 
        } 

        .ui-layout-toggler { /* all 'toggler-buttons' */ 
                background: #AAA; 
        } 

        </style>

        <!-- REQUIRED scripts for layout widget -->
        <script type="text/javascript" src="jquery-latest.js"></script>
        <script type="text/javascript" src="jquery-ui-latest.js"></script>
        <script type="text/javascript" src="jquery.layout-latest.js"></script>
        <script type="text/javascript" src="jquery.layout.resizePaneAccordions-1.0.js"></script>

        <script type="text/javascript" src="themeswitchertool.js"></script> 
        <script type="text/javascript" src="debug.js"></script>

        <!-- XMPP library -->
        <script type="text/javascript"  src="../xmpp_components/strophe/strophe.js"></script>
        <script type="text/javascript"  src="../xmpp_components/strophe/flXHR.js"></script>
        <script type="text/javascript"  src="../xmpp_components/strophe/strophe.flxhr.js"></script>


        <!-- Wait cursor -->
        <link   type="text/css"         href="../ui_components/waitcursor/css/showLoading.css" rel="stylesheet" />
        <script type="text/javascript"  src="../ui_components/waitcursor/js/jquery.showLoading.js"></script>

        <!-- Tic Tac Toe implementation -->
        <script src="../js/tictactoe/ttt_board.js"         type="text/javascript" ></script>
        <script src="../js/tictactoe/ttt_location.js"      type="text/javascript" ></script>
        <script src="../js/tictactoe/ttt_move.js"          type="text/javascript" ></script>
        <script src="../js/tictactoe/ttt_piece.js"         type="text/javascript" ></script>
        <script src="../js/tictactoe/ttt_playerType.js"    type="text/javascript" ></script>
        <script src="../js/tictactoe/ttt_player.js"        type="text/javascript" ></script>
        <script src="../js/tictactoe/ttt_rules.js"         type="text/javascript" ></script>
        <script src="../js/tictactoe/ttt_game.js"          type="text/javascript" ></script>
        <script src="../js/tictactoe/ttt_canvas.js"        type="text/javascript" ></script>
        <script src="../js/tictactoe/ttt_controller.js"    type="text/javascript" ></script>

        <link   href="../version_2/gamersweb.css"          type="text/css" rel="stylesheet" />   
        <script src="../version_2/gamersweb_xmpp.js"       type="text/javascript"  ></script>
        <script src="../version_2/gamersweb_ui.js"         type="text/javascript"  ></script>
        <script src="../version_2/gamersweb_main.js"            type="text/javascript"></script>

        <script type="text/javascript">
        $(document).ready( function() {

                myLayout = $('body').layout({
                    west__size:			300
                 ,	east__size:			300
                    // RESIZE Accordion widget when panes resize
                 ,	west__onresize:		$.layout.callbacks.resizePaneAccordions
                 ,	east__onresize:		$.layout.callbacks.resizePaneAccordions
                 ,  north__resizable: false
                 ,  south__resizable: false
                });

                // ACCORDION - in the West pane
                $("#accordion1").accordion({ fillSpace: true });

                // ACCORDION - in the East pane - in a 'content-div'

                $("#accordion2").accordion({
                        fillSpace:	true
                ,	active:		1
                });



                // THEME SWITCHER
                // addThemeSwitcher('.ui-layout-north',{ top: '12px', right: '5px' });
                // if a new theme is applied, it could change the height of some content,
                // so call resizeAll to 'correct' any header/footer heights affected
                // NOTE: this is only necessary because we are changing CSS *AFTER LOADING* using themeSwitcher
                // setTimeout( myLayout.resizeAll, 1000 ); /* allow time for browser to re-render with new theme */

        });
        </script>
    </head>
    <body>
        <div class="ui-layout-north ui-widget-content" style="display: none;">
            <div style="float: left; margin: 1px; padding: 1px;">
                    <button onClick="resizeWidgets()">Account</button>
                    <button onClick="removeUITheme(); myLayout.resizeAll()">Help</button>
            </div>
        </div>

        <div class="ui-layout-south ui-widget-content" style="display: none;"> Status : </div>

        <div class="ui-layout-center" style="display: none;"> 
            <div id="main_tabs">
                <ul>
                    <li><a href="#tabWelcome">Welcome</a></li>
                    <li><a href="#tabTicTacToe">Tic Tac Toe</a></li>                        
                </ul>

                <div id="tabWelcome">
                    <div id="help">
                        <p>Welcome to Gamers' Web.</p>
                        <p>Use a pre-existing Jabber account to log in. To create a Jabber account, use <a href="https://register.jabber.org/">Jabber's web page</a></p>
                        <p>Click on a name in gamer's name in the roster to chat with him</p>
                        <p>Enter your message to the input box at the bottom of the tab, and hit Enter to send</p>
                        <p>Currently, it is only possible to play Tic Tac Toe against yourself.</p>
                        <p>Developed, tested, with Firefox version 6.0.2. May or may not work with other browsers .... </p>
                    </div>
                </div>

                <div id="tabTicTacToe">
                    <div id="gameTitles">
                        <div id="gameTitle1">
                            <span id="humanGamer">Guest</span><span class="textRed"> X </span> Vs. Machine <span class="textBlue"> O </span>
                        </div>
                        <div id="gameTitle2">
                        </div>   
                        <div id="gameTitle3">
                            <meta id="playerXsymbol" src="../resources/x.png" alt="X"></meta>
                            <meta id="playerYsymbol" src="../resources/o.png" alt="O"></meta>                                
                            <img id="currentPlayerSymbol" src="resources/x.png" alt="X" draggable ></img>
                        </div>   
                    </div>
                    <div>
                        <canvas id="gameboard" width="300" height="300"> </canvas>
                    </div>
                    <button id="restart">Restart</button>
                    <div class="debugInfo">
                        <div>Mouse location on canvas: xPos = <span id="xPos">n/a</span> , yPos = <span id="yPos">n/a</span></div>
                        <div>Last drop location = <span id="location">n/a</span></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="ui-layout-west" style="display: none;">
                <div id="accordion1" class="basic">
                    <h3 id="account"><a href="#">Account Connection:</a></h3>
                    <div>
                        <div id="connection_create">
                            <span id="login_title">Enter to login:</span><br/>
                            <input id="username" type="text" placeholder="Your Jabber user name here" autofocus/><br/>
                            <input id="password" type="password" placeholder="Your Jabber passowrd here"/><br/>
                            <button id="xmpp_connect">Connect</button>
                        </div>
                        <div id="connection_destroy">
                            <span id="logout_title">You are logged in:</span><br/>
                            <button id="xmpp_disconnect">Disconnect</button>
                        </div>  
                    </div>

                    <h3 id="personal"><a href="#">Personal status:</a></h3>
                    <div>Personal status form here</div>


                    <h3 id="buddies"><a href="#">Buddies:</a></h3>
                    <div id='roster-area'>
                        <button id="addContact">Add a contact</button>
                        <ul>
                        </ul>
                    </div>
                </div>
        </div>

        <div class="ui-layout-east" style="display: none;">
                <!-- <h3 class="ui-widget-header">East Pane</h3> -->

                <div class="ui-layout-content">
                        <div id="accordion2" class="basic">

                                <h3><a href="#">Section 1</a></h3>
                                <div>
                                        <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. 
                                                Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc.</p>
                                        <p>Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. 
                                                Vestibulum a velit eu ante scelerisque vulputate.</p>
                                </div>

                                <h3><a href="#">Section 2</a></h3>
                                <div>
                                        <h5>Sed Non Urna</h5>
                                        <p>Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus.
                                                Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit,
                                                faucibus interdum tellus libero ac justo.</p>
                                        <p>Vivamus non quam. In suscipit faucibus urna.</p>
                                </div>

                                <h3><a href="#">Section 3</a></h3>
                                <div>
                                        <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
                                                Phasellus pellentesque purus in massa. Aenean in pede.</p>
                                        <p>Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, 
                                                magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.</p>
                                        <ul>
                                                <li>List item one</li>
                                                <li>List item two</li>
                                                <li>List item three</li>
                                        </ul>
                                </div>

                                <h3><a href="#">Section 4</a></h3>
                                <div>
                                        <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames 
                                                ac turpis egestas.</p>
                                        <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
                                                Aenean lacinia mauris vel est.</p>
                                        <p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
                                                Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                                </div>

                        </div>
                </div>

                <h4 class="ui-widget-content ui-state-hover">Accordion inside DIV.ui-layout-content</h4>
        </div>
        <div id="contactDialog" class="hidden">
            <div><label>Email:</label><input type="email" id="contactId"/></div>
            <div><label>Name:</label><input type="text" id="contactName"/></div>
        </div>

        <div id="approveDialog" class="hidden">
            <p><span id="approveJid"></span> has requested a subscription to your presence.</p>
            <p>Please approve or deny.</p>
        </div>    
    </body>
</html> 